<!-- 体验中 -->

<template>
	<view class="content">
		<view class="header">
			<view class="header-logo">
				<image src="../../static/index/heade-logo-tuya.png" mode=""></image>
			</view>
			<view class="back">
				<image src="../../static/index/返回@2x.png" mode="" @click="back()"></image>
			</view>
		</view>
		<view class="main">
			<view class="main-item">
				<image class="title" style="margin-left: 30rpx;" src="../../static/my/体验中标题@2x-tuya.png" mode="widthFix"></image>
				<view v-if="data.orderData.length > 0">
					<view class="desc">
						<text>你的体验时间</text>
					</view>
					<view class="time">
						<view class="clock">
							<!-- 计时器 -->
							<bing-countup :hour="0" :minute="0" :second="data.orderData[0]?.create_time" />
						</view>
						<image src="../../static/images/time-bg.png" mode=""></image>
					</view>
					<view class="text">{{data.orderData[0]?.name}}</view>
					<view class="text">{{data.orderData[0]?.goods_name}}</view>
					<view class="text">订单编号：{{data.orderData[0]?.order_sn}}</view>
					<view class="code">
						<image :src="data.orderData[0]?.qrcode" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import TabBar from '@/components/TabBar.vue';
import { ordersList } from "@/request/api/order.js";
import { onLoad } from "@dcloudio/uni-app";

import { reactive } from 'vue';
const data = reactive({
	orderData: [],
	pages: {
		page: 1,
		limit: 10,
		model: 1,
		status: 2
	}
})


onLoad((e) => {
	getOrderData()
})

// 获取订单
const getOrderData = async () => {
	let paramas = { };
	const resultData = await ordersList(data.pages);
	data.orderData = resultData.data.list;
}

const back = () => {
	console.log('123')
	uni.switchTab({
		url: '/pages/my/my'
	})
}

</script>

<style lang="scss" scoped>
	.content {
		.header {
			width: 100%;
			position: relative;
			top: 0;
			left: 0;
			.header-logo > image {
				width: 100%;
				height: 330rpx;
			}
			.back > image {
				color: #fff;
				width: 20rpx;
				height: 34rpx;
				position: absolute;
				top: 100rpx;
				left: 50rpx;
				z-index: 9999;
			}
		}
		.main {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-radius: 70rpx 70rpx 0rpx 0rpx;
			position: absolute;
			top: 200rpx;
			padding-top: 30rpx;
			padding-bottom: 200rpx;
			.main-item {
				margin-top: 20rpx;
				padding: 0rpx 36rpx;
				.title {
					width: 562rpx;
				}
				.time {
					margin-top: 36rpx;
					margin-bottom: 76rpx;
					text-align: center;
					position: relative;
					image {
						width: 100%;
						height: 167rpx;
					}
					.clock {
						width: 100%;
						height: 300rpx;
						text-align: center;
						position: absolute;
						top: 30rpx;
						left: 0;
					}
				}
				.desc {
					margin-bottom: 36rpx;
					font-size: 36rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000000;
					line-height: 50rpx;
				}
				.text {
					font-size: 26rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1C1919;
					line-height: 36rpx;
					margin-bottom: 6rpx;
				}
				.code {
					width: 356rpx;
					height: 356rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 1rpx solid #E5E4E4;
					padding: 20rpx;
					box-sizing: border-box;
					margin: 0 auto;
					margin-top: 12rpx;
					image {
						width: 316rpx;
						height: 316rpx;
					}
				}
			}
		}
	}

</style>
